<template>
	<view class="content">
		<f-navbar title="个人中心" fontColor="#333" navbarType="4" fontSize="34"
			gradient="linear-gradient(-90deg,#E5C2A4, #FBEBDC )"></f-navbar>
		<view class="content_top">
			<view class="content_topL">
				<view class="content_topLimg" v-if="token">
					<image class="content_topLimg" :src="dataList.avatar" mode=""></image>
				</view>
				<view class="content_topLimg1" v-else></view>

				<view class="content_topLtxt">
					<view class="content_topLtxtbox">
						<view class="content_topLtxtname" v-if="token">{{dataList.nickname}}</view>
						<view class="content_topLtxtname" @click="gologin" v-else>立即登录</view>
						<view class="content_topR_price" @click="onmybalance">可用余额: <text class="content_topR_price1"
								v-if="token">￥{{dataList.balance_amount}}</text>
							<text class="content_topR_price1" v-else>￥0.00</text>
						</view>
					</view>
					<view class="content_topR">
						<view class="content_topLtxtinfo" v-if="token" @click="onPersonalInfo">我的资料
							<van-icon name="arrow" size="16" color="#999" />
						</view>
						<view class="content_topLtxtinfo" v-else>
						<!-- 	<van-icon name="arrow" size="16" color="#999" /> -->
						</view>
						<view class="content_topR_yt" @click="onUseto">余额的用途
							<van-icon class="questionicon" name="question" size="16" color="#999" />
							<view class="usertobox" v-show="isshowuseto">凡是购买平台活动的商品平台会根据活动规则自动返利到消费者余额中，消费者可凭借余额购买平台任何商品。</view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="content_title">
			<image class="content_title1" :src="imgurl+'my_topbj.png'" mode=""></image>
		</view>
		<view class="content_orderbox">
			<view class="content_orderboxtitle" @click="onMyOrder(1)">我的订单</view>
			<view class="content_orderboxtxt" >
				<view class="content_order" @click="onMyOrder(1)">
					<view class="content_ordericon">
						<image class="imgicon" :src="imgurl+'daifukuan.png'" mode=""></image>
					</view>
					<view class="content_ordertxt">待付款</view>
					<view class="content_toasticon" v-if="dataitemnum.wait_pay>0">
						{{dataitemnum.wait_pay}}
					</view>
				</view>
				<view class="content_order" @click="onMyOrder(2)">
					<view class="content_ordericon1">
						<image class="imgicon" :src="imgurl+'daifahuo.png'" mode=""></image>
					</view>
					<view class="content_ordertxt">待发货</view>
					<view class="content_toasticon" v-if="dataitemnum.wait_send>0">
						{{dataitemnum.wait_send}}
					</view>
				</view>
				<view class="content_order" @click="onMyOrder(3)">
					<view class="content_ordericon2">
						<image class="imgicon" :src="imgurl+'daishouhuo.png'" mode=""></image>
					</view>
					<view class="content_ordertxt">待收货</view>
					<view class="content_toasticon" v-if="dataitemnum.wait_receive>0">
						{{dataitemnum.wait_receive}}
					</view>
				</view>
				<view class="content_order" @click="onMyOrder(4)">
					<view class="content_ordericon3">
						<image class="imgicon" :src="imgurl+'yiwancheng.png'" mode=""></image>
					</view>
					<view class="content_ordertxt">已完成</view>
				</view>
				<view class="content_order" @click="onMyOrder(5)">
					<view class="content_ordericon4">
						<image class="imgicon" :src="imgurl+'shouhou.png'" mode=""></image>
					</view>
					<view class="content_ordertxt">售后</view>
					<view class="content_toasticon" v-if="dataitemnum.service_num>0">
						{{dataitemnum.service_num}}
					</view>
				</view>
			</view>
		</view>
		<view class="content_setupbox">
			<view class="content_setup" @click="onMyCollection">
				<view class="content_setupboximg">
					<image class="imgicon" :src="imgurl+'shangpinshoucang.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">我的收藏</view>
			</view>
			<view class="content_setup" @click="onAddress">
				<view class="content_setupboximg1">
					<image class="imgicon" :src="imgurl+'shouhuodizhi.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">收货地址</view>
			</view>
			<view class="content_setup" @click="onHistory">
				<view class="content_setupboximg2">
					<image class="imgicon" :src="imgurl+'liulanlishi.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">浏览历史</view>
			</view>
			<view class="content_setup" @click="onsetting">
				<view class="content_setupboximg">
					<image class="imgicon" :src="imgurl+'shezhi.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">设置</view>
			</view>
			<button class="content_setup" open-type="contact" session-from="weapp"
				style="padding: 0; margin: 0; background:#fff" @click="lianxikefu">
				<view class="content_setupboximg">
					<image class="imgicon" :src="imgurl+'shouhou.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">联系客服</view>
			</button>
			<button class="content_setup" open-type="share" session-from="weapp"
				style="padding: 0; margin: 0; background:#fff" @click="lianxikefu">
				<view class="content_setupboximg">
					<image class="imgicon" :src="imgurl+'tuijian.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">推荐给好友</view>
			</button>
			<view class="content_setup" @click="onWithdrawal">
				<view class="content_setupboximg">
					<image class="imgicon" :src="imgurl+'tixian.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">申请提现</view>
			</view>
	<!-- 		<view class="content_setup" @click="onsetting">
				<view class="content_setupboximg">
					<image class="imgicon" :src="imgurl+'bangzhuzhongxin.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">帮助中心</view>
			</view> -->
			<view class="content_setup" @click="onyinhangka">
				<view class="content_setupboximg_yh">
					<image class="imgicon" :src="imgurl+'yinhangka.png'" mode=""></image>
				</view>
				<view class="content_setupboxtxt">银行卡</view>
			</view>

		</view>
		<view class="StoreCenter">
			<view class="StoreCenter_title">
				店铺中心
			</view>
			<view class="StoreCenter_item">
				<view class="StoreCenter_box" @click="onstoreLogin">
					<view class="StoreCenter_icon">
						<image class="imgicon" :src="imgurl+'store_img.png'" mode=""></image>
					</view>
					<view class="StoreCenter_txt">
						我的店铺
					</view>
				</view>
			</view>
		</view>

		<view class="recommend_box">
			<view class="recommend" v-for="(recommentitem,recommentindex) in RecommendList" :key="recommentindex"
				@click="ondetail(recommentitem)">
				<view class="recommend_img">
					<image class="recommend_img1" :src="recommentitem.good_img" mode=""></image>
				</view>
				<view class="recommend-title">{{recommentitem.title}}</view>
				<view class="recommend_bottom">
					<view class="recommend_price">￥{{recommentitem.now_price}}</view>
					<view class="recommend_num"> 已售{{recommentitem.total_sale_num}}件</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getCenterData,
		getRecommendList
	} from '../../utils/app.js'
	export default {
		components: {
			fNavbar,
		},
		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				token: uni.getStorageSync('token'),
				dataList: {},
				RecommendList: [], // 推荐商品
				isshowuseto: false, // 余额的用途是否显示
				dataitemnum:{}, // 订单数量
			}
		},
		onLoad() {
			this.getList()
			this.getrecommendList()
		},
		// created() {
			
		// },
		onShow() {
			this.getList()
			this.getrecommendList()
		},
		methods: {

			// 余额的用途
			onUseto() {
				this.isshowuseto = !this.isshowuseto
				let that = this
				setTimeout(function() {
					// console.log('0000');
					that.isshowuseto = false
				}, 5000)
			},


			// 推荐数据跳转到详情
			ondetail(e) {
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?codeid=' + e.code
				})
			},
			// 获取推荐数据
			getrecommendList() {
				// console.log('11111'+ uni.getStorageSync('cityinfo').region_code);
				getRecommendList({
					region_code: uni.getStorageSync('cityinfo').region_code

				}).then(res => {
					console.log(res);
					this.RecommendList = res.data
					// this.SystemCateList = res.data
					// this.getSystemBanner(this.active)
					// this.getHomeData(true)
					// this.dataList = res.data

				})
			},
			// 去登录
			gologin() {
				uni.navigateTo({
					url: '/pages/subPack/Login/Login'
				})
			},
			// 获取数据
			getList() {
				this.token = uni.getStorageSync('token')
				getCenterData({

				}).then(res => {
					console.log(res);
					this.dataList = res.data.user_item
					this.dataitemnum = res.data.order_item
					// this.SystemCateList = res.data
					// this.getSystemBanner(this.active)
					// this.getHomeData(true)
					// this.dataList = res.data

				})
			},
			
			// 跳转到银行卡
			onyinhangka(){
				uni.navigateTo({
					url:'/pages/subPack/BankCard/BankCard'
				})
			},
			
			
			// 跳转到店铺登录页面
			onstoreLogin() {
				uni.navigateTo({
					url: '/pages/subPack/storeLogin/storeLogin'
				})
			},
			// 跳转到提现页面
			onWithdrawal() {
				uni.navigateTo({
					url: '/pages/subPack/Withdrawal/Withdrawal'
				})
			},
			// 跳转到联系客服页面
			lianxikefu() {
				console.log(111);
			},
			// 跳转到我的余额页面
			onmybalance() {
				uni.navigateTo({
					url: '/pages/subPack/Mybalance/Mybalance'
				})
			},
			// 跳转到设置页面
			onsetting() {
				uni.showToast({
					title: '正在开发中,敬请期待...',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url:'/pages/subPack/logs/logs'
				// })
			},
			// 跳转到地址页面
			onAddress() {
				uni.navigateTo({
					url: '/pages/subPack/Address/Address'
				})
			},
			// 跳转到历史记录
			onHistory() {
				uni.navigateTo({
					url: '/pages/subPack/History/History'
				})
			},
			// 跳转到我的收藏
			onMyCollection() {
				uni.navigateTo({
					url: '/pages/subPack/MyCollection/MyCollection'
				})
			},
			// 跳转到我的订单页面
			onMyOrder(e) {
				
				if(e==5){
					console.log(111);
					uni.navigateTo({
						url:'/pages/subPack/userAfterSales/userAfterSales'
					})
				} else {
					uni.navigateTo({
						url: '/pages/subPack/MyOrder/MyOrder?id=' + e
					})
				}
				
			},
			// 跳转到我的个人信息页面
			onPersonalInfo() {
				uni.navigateTo({
					url: '/pages/subPack/PersonalInfo/PersonalInfo'
				})
			},

		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_top {
		width: 100%;
		height: 161rpx;
		background: linear-gradient(to left, #E5C2A4, #FBEBDC);
		margin-top: 4rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_topL {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.content_topR {
		display: flex;
	}

	.content_topLimg {
		width: 100rpx;
		height: 100rpx;
		/* background: #556FB5; */
		border-radius: 50%;
	}

	.content_topLimg1 {
		width: 100rpx;
		height: 100rpx;
		background: #556FB5;
		border-radius: 50%;
	}

	.content_topLtxt {
		/* display: flex; */
		margin-left: 20rpx;
		width: 600rpx;
	}

	.content_topLtxtbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_topLtxtname {

		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
	}

	.content_topLtxtinfo {
		width: 181rpx;
		height: 57rpx;
/* 		background: linear-gradient(182deg, #F8F4F1 0%, #E7D9CE 100%);
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(244, 217, 194, 0.26);
		border-radius: 25rpx;
		line-height: 57rpx;
		text-align: center; */

		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
	}

	.content_topR {
		margin-top: 17rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_topR_price {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-right: 28rpx;
	}

	.content_topR_price1 {
		color: #FF0000;
		font-weight: 500;
	}

	.content_topR_yt {
		width: 221rpx;
		height: 50rpx;
		background: linear-gradient(182deg, #F8F4F1 0%, #E7D9CE 100%);
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(244, 217, 194, 0.26);
		border-radius: 25rpx;
		margin-right: 28rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
		line-height: 50rpx;
		text-align: center;
		position: relative;
	}
	
	.usertobox{
		width: 360rpx;
		/* height: 300rpx; */
		border-radius: 10rpx;
		background: rgba(0,0,0, 0.76);
		position: absolute;
		top: 60rpx;
		right: 0rpx;
		padding: 15rpx;
		font-size: 24rpx;
		text-align: left;
		text-indent: 2em;
		color: #fff;
	}
	
	

	.questionicon {
		margin-left: 10rpx;
	}

	.content_title {
		width: 690rpx;
		height: 306rpx;
		/* background: pink; */
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.content_title1 {
		width: 100%;
		height: 100%;
	}

	.content_orderbox {
		width: 690rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.content_orderboxtitle {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-left: 20rpx;
		padding-top: 38rpx;
	}

	.content_orderboxtxt {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.content_order {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		position: relative;
	}
	.content_toasticon{
		width: 28rpx;
		height: 28rpx;
		background-color: #FF0000;
		text-align: center;
		line-height: 28rpx;
		color: #fff;
		font-size: 22rpx;
		border-radius: 50%;
		position: absolute;
		right: -5rpx;
		top: -10rpx;
	}

	.content_ordericon {
		width: 51rpx;
		height: 46rpx;
		/* background: #000; */
	}

	.content_ordericon1 {
		width: 51rpx;
		height: 45rpx;
		/* background: #000; */
	}

	.content_ordericon2 {
		width: 51rpx;
		height: 48rpx;
		/* background: #000; */
	}

	.content_ordericon3 {
		width: 51rpx;
		height: 44rpx;
		/* background: #000; */
	}

	.content_ordericon4 {
		width: 51rpx;
		height: 45rpx;
		/* background: #000; */
	}

	.content_ordertxt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 20rpx;

	}

	.content_setupbox {
		width: 690rpx;
		height: 314rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 30rpx 0;
	}

	.content_setup {
		width: 160rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		/* justify-content: space-between; */
		/* margin-top: 40rpx; */

	}

	button::after {
		border: none;
		background-color: none;
		margin: 0;
		padding: 0;
		/* border-radius:0; */
	}

	.content_setupboximg {
		width: 50rpx;
		height: 55rpx;
		/* background: #000; */
	}

	.content_setupboximg1 {
		width: 51rpx;
		height: 56rpx;
		/* background: #000; */
	}

	.content_setupboximg2 {
		width: 51rpx;
		height: 33rpx;
		margin-bottom: 20rpx;
		/* background: #000; */
	}
	.content_setupboximg_yh{
		width: 41rpx;
		height: 31rpx;
		margin-bottom: 10rpx;
	}

	.content_setupboxtxt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 16rpx;
		line-height: 28rpx;
	}

	.StoreCenter {
		width: 690rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.StoreCenter_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-left: 20rpx;
		padding-top: 38rpx;
	}

	.StoreCenter_item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.StoreCenter_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.StoreCenter_icon {
		width: 51rpx;
		height: 46rpx;
		/* background: #000; */
	}

	.StoreCenter_txt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 20rpx;
	}

	.imgicon {
		width: 100%;
		height: 100%;
	}



	.recommend_box {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.recommend {
		width: 335rpx;
		height: 404rpx;
		background: #FBFBFB;
		border-radius: 15rpx;
		margin-right: 20rpx;
		margin-bottom: 21rpx;
	}

	.recommend:nth-child(2n) {
		margin-right: 0;
	}

	.recommend_img {
		width: 335rpx;
		height: 290rpx;
		border-radius: 15rpx 15rpx 0rpx 0rpx;
	}

	.recommend_img1 {
		width: 100%;
		height: 100%;
	}

	.recommend-title {
		width: 270rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 27rpx;
		white-space: nowrap;
		/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/*隐藏部分以省略号代替*/
	}

	.recommend_bottom {
		width: 335rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.recommend_price {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;


	}

	.recommend_num {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #777777;
		margin-right: 40rpx;
	}
</style>